<template>
  <el-dialog title="请选择支付方式" :lock-scroll="false" :visible.sync="visible" @close="close" customClass="pay-layers">
    <div class="clearfix">
      <div class="wechat_img chongimg" :class="{czActive:weixinBool}" @click="wechatpay">
        <img src="../../static/img/wechat_img.png">
      </div>
      <div class="alipay_img chongimg" :class="{czActive:!weixinBool}" @click="allipay">
        <img src="../../static/img/alipay_img.png">
      </div>
    </div>
    <div class="imgBox">
      <img :src='imgSrc' />
    </div>
    <p class="recharge-money">支付金额：<em>{{calcPrice}}</em> 元</p>
  </el-dialog>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
        calcPrice: 0,
        weixinBool: true,
        imgSrc: 'http://www.xilongfx.com/static/user/img/loading.gif',
        type:1,
        order_sn: '',
        bool: true,
        timers:''
      }
    },
    methods: {
      allipay() {
        if (this.weixinBool) {
          this.weixinBool = false
          this.type = 2
          this.imgSrc= 'http://www.xilongfx.com/static/user/img/loading.gif'
          this.getImgUrl(this.type)
        }
      },
      wechatpay() {
        if (!this.weixinBool) {
          this.weixinBool = true
          this.type = 1
          this.imgSrc= 'http://www.xilongfx.com/static/user/img/loading.gif'
          this.getImgUrl(this.type)
        }
      },
      close() {
        this.bool = true
        this.weixinBool = true
        this.type = 1
        this.imgSrc= 'http://www.xilongfx.com/static/user/img/loading.gif'
        clearTimeout(this.timers)
      },
      showToggle(price) {
        this.visible = !this.visible
        this.calcPrice = price
        this.getImgUrl(this.type)
      },
      //获取二维码url
      getImgUrl(type) {
        const that = this
        this.$http.post('index/user/addWebOrder', {pay_type: type, total_price: that.calcPrice}).then((res) => {
          let Ares = JSON.parse(res)
          if (Ares.code == 1) {
            that.imgSrc = 'index/user/createQrCode?order_sn='+Ares.msg;
            that.order_sn=Ares.msg;
            if (that.bool) {
              that.dingshi();
            }
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      //定时查询订单状态
      dingshi() {
        const that = this
        that.bool = false;
        this.$http.post('index/user/getWebOrderStatus', {order_sn: that.order_sn}).then((res) => {
          let Ares = JSON.parse(res)
          if (Ares.code != 1) {
            that.timers = setTimeout(() => {
              that.dingshi();
            }, 10000);
          } else {
            that.visible = !that.visible
            that.$message('支付成功!')
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .pay-layers {
    width: 380px;
    height: 440px;
    background-color: #ffffff;
    border-radius: 8px;
    $recharge-gutter: 15px;
    .el-dialog__header {
      text-align: center;
      padding: 40px 20px 0;
    }
    .el-dialog__title {
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      color: #333333;
      position: relative;
      &:before{
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        left: -30px;
        top: 13px;
      }
      &:after{
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        right: -30px;
        top: 13px;
      }
    }
    .el-dialog__body {
      padding: 30px 20px 0;
      .imgBox {
        width: 154px;
        height: 154px;
        border: dashed 1px #c7c7c7;
        padding: 2px;
        margin: 47px auto 0;
        img {
          width: 148px;
          height: 148px;
        }
      }
      .chongimg {
        float: left;
        width: 149px;
        height: 65px;
        border-radius: 5px;
        border: solid 1px #e7e7e7;
        text-align: center;
        cursor: pointer;
        &.wechat_img {
          margin-right: 40px;
          img {
            width: 128px;
            height: 35px;
            margin-top: 15px;
          }
        }
        &.alipay_img {
          img {
            width: 110px;
            height: 39px;
            margin-top: 13px;
          }
        }
        &.czActive {
          border: solid 1px #1968b1;
        }
      }
    }
    .el-dialog__footer{
      padding-top: 0;
    }
    .recharge-money {
      text-align: center;
      margin-top: 18px;
      em {
        color: #de4414;
        font-size: 18px;
      }
    }
  }
</style>
